<template>
  <el-card
    class="distribute-container"
    v-loading="loading"
    :element-loading-text="loadingText"
  >
    <!-- 自动分发 -->
    <div class="automatic">
      <h4>自动分发到每个业务员</h4>
      <el-divider content-position="left">
        <el-select v-model="autoCount" placeholder="请选择分发数量">
          <el-option
            v-for="item in allDistributeCount"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="success" @click.native.prevent="autoSend"
          >分发</el-button
        ></el-divider
      >
    </div>
    <!-- 单人分发 -->
    <div class="single">
      <h4>单人分发</h4>
      <el-divider content-position="left">
        <el-select v-model="singleUserId" placeholder="请选择业务员">
          <el-option
            v-for="item in allPersonList"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select v-model="singleCount" placeholder="请选择分发数量">
          <el-option
            v-for="item in distributeCount"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="success" @click.native.prevent="singleSend"
          >分发</el-button
        >
      </el-divider>
    </div>
    <!-- 业务员客户回收 -->
    <div class="recovery">
      <h4>客户回收</h4>
      <el-button type="primary" @click.native.prevent="recovery"
        >一键回收</el-button
      >
    </div>
    <!-- 下面数量介绍 -->
    <div class="count">
      <div class="totalCount">
        <div>待分发数量</div>
        <span>{{ allCount }}</span>
      </div>
      <div class="mySendCount">
        <div>已分发数量</div>
        <span>{{ allSendCount }}</span>
      </div>
      <div class="mySendCount">
        <div>小组分发数量</div>
        <span>{{ groupSendCount }}</span>
      </div>
    </div>
  </el-card>
</template>

<script>
import {
  getCountApi,
  autoSendApi,
  singleSendApi,
  recoveryApi,
  getAllPersonListApi
} from '@/api/user'
export default {
  name: 'distribute-page',
  data () {
    return {
      allDistributeCount: [
        {
          value: 50,
          label: 50
        },
        {
          value: 100,
          label: 100
        },
        {
          value: 150,
          label: 150
        }
      ],
      distributeCount: [
        {
          value: 50,
          label: 50
        },
        {
          value: 100,
          label: 100
        },
        {
          value: 150,
          label: 150
        }
      ],
      // 获取全部员工人员
      allPersonList: [],
      // 自动分发数量
      autoCount: '',
      // 单人分发数量
      singleCount: '',
      // 指定的业务员
      singleUserId: '',
      // 公海数量
      allCount: 0,
      // 全部 分发数量
      allSendCount: 0,
      // 小组 分发数量
      groupSendCount: 0,
      loading: false,
      loadingText: ''
    }
  },
  created () {
    this.getCount()
    this.getAllPersonList()
  },
  methods: {
    // 获取 我的组员 列表
    async getAllPersonList () {
      const { data: res } = await getAllPersonListApi()
      // console.log('获取 我的组员 列表', res)
      this.allPersonList = [...res.data]
    },
    // 获取 公海数量 分发数量 小组数量
    async getCount () {
      const { data: res } = await getCountApi()
      // console.log('获取 公海数量 分发数量 小组数量', res)
      this.allCount = res.data.all_count
      this.allSendCount = res.data.send_count
      this.groupSendCount = res.data.group_count
    },
    // 自动分发
    async autoSend () {
      if (this.autoCount === '') {
        return this.$message({
          showClose: true,
          message: '请选择分发数量!',
          type: 'warning',
          duration: 1500
        })
      }
      this.loading = true
      this.loadingText = '数据正在分发中!'
      const { data: res } = await autoSendApi(this.autoCount)
      // console.log('自动分发', res)
      if (res.code === 410) {
        this.$message({
          showClose: true,
          message: '无资源可发!',
          type: 'error',
          duration: 1500
        })
      }
      if (res.code === 409) {
        this.$message({
          showClose: true,
          message: '他人正在分发中,请稍后再试!',
          type: 'error',
          duration: 1500
        })
      }
      if (res.code === 200) {
        this.$message({
          showClose: true,
          message: '已分发成功!',
          type: 'success',
          duration: 1500
        })
      }
      // 清空数据
      this.autoCount = ''
      this.loading = false
      this.loadingText = ''
      // 渲染公海详情信息
      this.getCount()
    },
    // 单人分发
    async singleSend () {
      if (this.singleCount === '' || this.singleUserId === '') {
        return this.$message({
          showClose: true,
          message: '请先选择业务员或分发数量!',
          type: 'warning',
          duration: 1500
        })
      }
      this.loading = true
      this.loadingText = '数据正在分发中!'
      const { data: res } = await singleSendApi(
        this.singleUserId,
        this.singleCount
      )
      // console.log('单人分发', res)
      if (res.code === 410) {
        this.$message({
          showClose: true,
          message: '无资源可发!',
          type: 'error',
          duration: 1500
        })
      }
      if (res.code === 409) {
        this.$message({
          showClose: true,
          message: '他人正在分发中,请稍后再试!',
          type: 'error',
          duration: 1500
        })
      }
      if (res.code === 200) {
        this.$message({
          showClose: true,
          message: '已分发成功!',
          type: 'success',
          duration: 1500
        })
      }
      // 清空数据
      this.singleCount = ''
      this.singleUserId = ''
      // 渲染公海详情信息
      this.getCount()
      this.loading = false
      this.loadingText = ''
    },
    // 回收数据
    recovery () {
      this.$confirm('此操作将回收全部客户, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.loading = true
          this.loadingText = '数据正在回收中!'
          const { data: res } = await recoveryApi()
          // console.log('回收数据', res)
          if (res.code === 200) {
            this.$message({
              showClose: true,
              message: '数据已回收完成!',
              type: 'success',
              duration: 1500
            })
            // 渲染公海详情信息
            this.getCount()
            this.loading = false
            this.loadingText = ''
          }
        })
        .catch(() => {})
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.distribute-container {
  box-sizing: border-box;
  height: 837px;
  padding: 70px 135px 0px;
  .automatic {
    margin-top: 50px;
  }
  .single {
    margin-top: 70px;
  }
  .recovery {
    text-align: center;
    margin-top: 70px;
    display: flex;
    .el-button {
      margin-top: 44px;
      height: 40px;
      margin-left: 20px;
    }
  }
  h4 {
    margin: 50px 0;
  }
  .el-select {
    margin-right: 30px;
  }
  .count {
    margin-top: 80px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    div {
      margin-top: 35px;
      font-size: 18px;
      margin-bottom: 15px;
      span {
        font-size: 18px;
      }
    }
  }
}
</style>
